<template>
	<view class="page">
		<!-- 订单状态 -->

		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>{{orderData.statusTxt}}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="shipping-address" v-if="orderData.isexpress">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{addressData.name}}</text>
				<text>{{addressData.mobile}}</text>
			</view>
			<view class="address">
				<text>{{addressData.address}}</text>
			</view>
		</view>

		<view class="shipping-address" v-else>
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>自提</text>
				<text>{{orderData.name}}</text>
			</view>
			<view class="address">
				<text>{{orderData.phone}}</text>
			</view>
		</view>

		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list">
					<view class="thumb">
						<image :src="goodsData.img_list[0]" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{goodsData.title}}</text>
						</view>
						<view class="num-size">
							<text>数量：{{orderData.goods_num}}</text>
							<text v-for="(el,idx) in goodsData.attribute" :key="idx">{{el._key}}: {{el._value}}</text>
						</view>
						<view class="price">
							<text>￥{{goodsData.real_price}}</text>
						</view>
						<view class="order-btn">
							<view class="btn" @click="onApplyAftersales">
								<text>申请售后</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{orderData.order_sn}}</text>
						<text class="btn">复制</text>
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{orderData.create_time}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">订单更新时间:</view>
					<view class="content">
						<text>{{orderData.update_time}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">支付方式:</view>
					<view class="content">
						<text>在线支付</text>
					</view>
				</view>
			</view>
		</view>


		<view class="order-info" v-if="orderData.status == 3 && orderData.isexpress">
			<view class="info-list">
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>普通快递</text>
					</view>
				</view>
				<view class="list">
					<view class="title">快递公司:</view>
					<view class="content">
						<text>{{orderData.express_name}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">快递单号:</view>
					<view class="content">
						<text>{{orderData.express_order}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price">
						<text>￥{{orderData.order_price}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text>+￥{{orderData.express_fee}}</text>
					</view>
				</view>
				<view class="list action">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price">
						<text>￥{{(orderData.order_price-0) + (orderData.express_fee-0)}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btn">
			<!-- <view class="del">
				<text>删除订单</text>
			</view>
			<view class="btn">
				<text>查看发票</text>
				<text class="action">确认付款</text>
			</view> -->
			<view class="btn" v-if="orderData.status == 3">
				<text class="action" @click="confimOrderExpress">确认收获</text>
			</view>
			<!-- <view class="btn" v-if="orderData.status == 2">
				<text class="action" @click="cancelOrder">取消订单</text>
			</view> -->

			<view class="btn" v-if="orderData.status == 4 || orderData.status == 7">
				<text class="action" @click="delOrder">删除订单</text>
			</view>
			<view class="btn" v-if="orderData.status == 7">
				<text class="action" @click="comment">去评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		delOrderById,
		orderComment,
		getOrderInfoById,
		saveOrder
	} from '@/config/api.js';
	export default {
		data() {
			return {
				queryList: {
					id: ''
				},
				express_name: '',
				express_order: '',
				orderData: {},
				goodsData: {},
				addressData: {},
			};
		},

		onLoad(options) {
			this.queryList.id = options.oderId;
			console.log(options)
			getOrderInfoById(this.queryList).then(res => {
				this.orderData = res.orderData;
				this.goodsData = res.goodsData;
				this.addressData = res.addressData;
			})
		},

		methods: {
			comment() {
				const _this = this;
				uni.showModal({
					title: '请填写评论内容',
					editable: true,
					placeholderText: '请填写评论内容',
					success: function(res) {
						if (res.confirm) {
							orderComment({
								id: _this.orderData.id,
								content: res.content
							}).then(res => {
								uni.$u.toast('操作成功！')
							})
							// saveOrder({
							// 	id: _this.orderData.id,
							// 	status: 4
							// }).then(res => {

							// })


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delOrder() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该订单？',
					success: function(res) {
						if (res.confirm) {
							delOrderById({
								id: _this.orderData.id,
							}).then(res => {
								uni.$u.toast('操作成功！')
							})


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancelOrder() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单？',
					success: function(res) {
						if (res.confirm) {
							saveOrder({
								id: _this.orderData.id,
								status: 5
							}).then(res => {
								uni.$u.toast('操作成功！')
							})


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confimOrderExpress() {
				saveOrder({
					id: this.orderData.id,
					status: 7
				}).then(res => {
					getOrderInfoById(this.queryList).then(res => {
						this.orderData = res.orderData;
						this.goodsData = res.goodsData;
						this.addressData = res.addressData;
					})
				})
			},
			/**
			 * 售后点击
			 */
			onApplyAftersales() {
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
</style>
